<template>
  <div class="price-set">
    <div class="content-box">
      <div class="header flex-center">
        <span>添加币种行情</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <div class="search-item flex-left">
        <label>平台</label>
        <el-select
          v-model="param.platform"
          placeholder="请选择平台"
          size="small"
          filterable
          @change="getBaseToken()"
        >
          <el-option
            v-for="item in parallel"
            :key="item.id"
            :value="item.platform"
          ></el-option>
        </el-select>
      </div>
      <div class="search-item flex-left">
        <label>币种</label>
        <el-select
          v-model="coin"
          placeholder="请选择币种"
          size="small"
          filterable
        >
          <el-option
            v-for="(item, index) in supList"
            :key="item.id"
            :label="item.name"
            :value="index"
          ></el-option>
        </el-select>
      </div>
      <div class="search-item flex-left">
        <label>自定义价格</label>
        <el-input
          v-model="ticker"
          placeholder="请输入自定义价格，最多4位小数"
        ></el-input>
      </div>
      <div class="bottom flex-center">
        <el-button size="small" type="primary" @click="submit()"
          >确定</el-button
        >
        <el-button size="small" @click="$emit('cancel')">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSupTokenList,
  setCoinPrice,
} from "../../views/CoinsManage/Coins.service.js";
export default {
  props: ["platform_id"],
  data() {
    return {
      supList: [],
      param: {
        platform_id: this.platform_id,
        page: 1,
        size: 999999,
      },
      coin: "",
      ticker: "",
    };
  },
  computed: {
    parallel() {
      return this.$store.state.para_list;
    },
  },
  watch: {
    "form.ticker": {
      handler(newVal) {
        let index = newVal.indexOf(".");
        if (index > -1) {
          let n = newVal.substring(0, index + 1);
          let m = newVal.substring(index + 1, newVal.length);
          this.form.ticker = m.length > 4 ? n + m.substring(0, 4) : n + m;
        }
      },
      deep: true,
    },
  },
  methods: {
    async getBaseToken() {
      this.coin = "";
      const res = await getSupTokenList(this.param);
      this.supList = res.data.items || [];
    },
    async submit() {
      const res = await setCoinPrice("post", {
        platform_id: Number(this.platform_id),
        coin_name: this.supList[this.coin].name,
        coin_id: this.supList[this.coin].id,
        ticker: this.ticker,
      });
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: "添加成功",
        });
        this.$emit("success");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.price-set {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
  .content-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    min-width: 600px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    .header {
      margin-bottom: 10px;
      padding: 15px 0;
      span {
        font-weight: 600;
        font-size: 18px;
      }
      i {
        position: absolute;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
      }
      i:hover {
        color: #409eff;
      }
    }
    .search-item {
      padding: 15px 50px;
      label {
        width: 100px;
      }
    }
    .transfer-box {
      // text-align: center;
    }
    .bottom {
      margin: 30px auto;
    }
  }
}
</style>

